<script setup>
import { ref, defineProps, onMounted } from "vue";

// 定义 props
const props = defineProps({
  tabIndex: {
    type: Number,
    required: true
  }
});

const tabIndex = ref(0);

onMounted(() => {
  tabIndex.value = props.tabIndex;
});


const paddingTop = wx.getSystemInfoSync().statusBarHeight + 8;

function change(index) {
  switch (index) {
	case 0:
	uni.switchTab({
		url: "/pages/Home/index",
		animationDuration: 0,
	  });
	  break;
	case 1:
	uni.switchTab({
		url: "/pages/Service/index",
		animationDuration: 0,
	  });
	  break;
	case 2:
	uni.switchTab({
		url: "/pages/Me/index",
		animationDuration: 0,
	  });
	  break;
  }
}
</script>

<template>
	<view class="tabbr">
		<uv-tabbar :value="tabIndex" @change="change" activecColor="#7d7e80" inactiveColor="#7d7e80">
			<uv-tabbar-item><template v-slot:active-icon>
					<image class="icon" src="@/static/icon/home_active.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="@/static/icon/home.png"></image>
				</template>
				<template v-slot:text>
					<view class="text">首页</view>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item>
				<template v-slot:active-icon>
					<image class="icon" src="@/static/icon/car_active.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="@/static/icon/car.png"></image>
				</template>
				<template v-slot:text>
					<view class="text">车辆服务</view>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item>
				<template v-slot:active-icon>
					<image class="icon" src="@/static/icon/me_active.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="@/static/icon/me.png"></image>
				</template>
				<template v-slot:text>
					<view class="text">我的</view>
				</template></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>



<style scoped>
	.icon {
		margin-top: 12px;
		width: 18px;
		height: 18px;
	}
</style>